<template>
  <div class="text-collapse" :class="[bgClass]">
    <span class="text-content">
      {{ displayText }}
    </span>

    <!-- 标签：独立于文字流，不影响换行 -->
    <div class="tag-container">
      <span v-if="type" class="tag" :class="tagClass" @click.stop="handleTagClick">
        {{ type }}
      </span>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';

interface Props {
  text: string;
  limit?: number;
  type?: '客服备注' | '销售备注' | string;
}

const props = defineProps<Props>();
const emit = defineEmits(['tag-click']);

// 默认展示字数
const limit = computed(() => props.limit ?? 50);

// 是否超出限制
const isOverflow = computed(() => props.text?.length > limit.value);

// 展示文字
const displayText = computed(() => {
  if (!isOverflow.value) return props.text;
  return props.text.slice(0, limit.value) + '...';
});

// 背景色随类型变化
const bgClass = computed(() => {
  switch (props.type) {
    case '客服备注':
      return 'bg-service';
    case '销售备注':
      return 'bg-sales';
    default:
      return 'bg-default';
  }
});

// 标签样式分类
const tagClass = computed(() => {
  switch (props.type) {
    case '客服备注':
      return 'tag-service';
    case '销售备注':
      return 'tag-sales';
    default:
      return 'tag-default';
  }
});

// 点击标签
function handleTagClick() {
  emit('tag-click', props.type);
}
</script>

<style scoped>
.text-collapse {
  width: 100%;
  display: flex;
  flex-direction: column;
  font-size: 13px;
  color: #222;
  white-space: pre-wrap;
  word-break: break-word;
  border-radius: 8px;
  padding: 10px;
  transition: all 0.25s ease;
}

/* 背景配色策略 */
.bg-service {
  background: #fff5f5; /* 浅红底 */
  box-shadow: inset 0 0 0 1px #ffd6d6;
}

.bg-sales {
  background: #f5f7ff; /* 淡蓝紫底 */
  box-shadow: inset 0 0 0 1px #d9e0ff;
}

.bg-default {
  background: #f8f8f8;
  box-shadow: inset 0 0 0 1px #e5e5e5;
}

/* 渐隐遮罩效果 */
.text-collapse.is-truncated::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 60px;
  height: 1.6em;
  background: linear-gradient(to right, transparent, rgba(250, 250, 250, 0.8));
}

/* 文本主体 */
.text-content {
  color: #333;
  font-weight: 400;
  letter-spacing: 0.2px;
  margin-bottom: 4px;
  line-height: 1.4;
}

.tag-container {
  display: flex;
  justify-content: flex-end;
}

/* 标签：小药丸形态 */
.tag {
  display: inline-block;
  padding: 0px 8px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  user-select: none;
  transition: all 0.2s ease;
  border: 1px solid transparent;
}

/* 标签颜色 */
.tag-service {
  background-color: #fff;
  color: #d74a4a;
  border-color: #f3b2b2;
}

.tag-sales {
  background-color: #ffffff;
  color: #4a58d7;
  border-color: #b6bdf7;
}

.tag-default {
  background-color: #ffffff;
  color: #606266;
  border-color: #dcdfe6;
}
</style>
